<template>
    <div class="container">
        <div class="registerPanelBody">
            <div class='regiterTitle'>
            <h1>注册</h1>
        </div>
            <div class="registerDiv">
                <el-autocomplete
                v-model="selectCompany"
                :fetch-suggestions="querySearchAsync"
                placeholder="搜索单位名称（查询）"
                @select="handleSelectCompany"
                ></el-autocomplete>
            </div>
            <div class="registersocialCreditCode">   
                    <el-input
                        placeholder="统一社会信用代码"
                        v-model="socialCreditCode"
                        clearable>
                    </el-input>
            </div>
            <div class="registerSelect">
                <el-select v-model="registerCompany" placeholder="请选择街道">
                    <!-- <el-option-group
                    v-for="group in districts"
                    :key="group.label"
                    :label="group.label"> -->
                    <el-option
                        v-for="item in streets"
                        :key="item.street"
                        :label="item.street"
                        :value="item.street">
                    </el-option>
                    <!-- </el-option-group> -->
                </el-select>
            </div>
            <div class="registerPhoneNumber">   
                    <el-input
                        placeholder="电话号码"
                        v-model="phoneNumber"
                        clearable>
                    </el-input>
                </div>
                <div class="registerSecurityCode">   
                    <el-input
                        placeholder="请输入密码"
                        v-model="passWords"
                        clearable>
                    </el-input>
                </div>
                <div class="RegisterSecurityCode">   
                    <el-input
                        placeholder="请输入验证码"
                        v-model="RegisterSecurityCode"
                        clearable>
                    </el-input>
                    <input v-on:click="sendSecurityCode" class="verify-btn" type="button" v-model="btnContent" v-bind="{'disabled':disabled}">
                </div>
                <div class="registerButton" style="text-align: center;">
                    <el-row>
                        <el-button type="primary" @click='registerMessage'>注册</el-button>
                        <!-- <el-button class="right" type="info" @click="insertCompany">未搜到单位，添加单位</el-button> -->
                    </el-row>
                </div>
                <div class="loginBlock">
                    <p class="p_left"><router-link to="/" class="registrePath">已注册，去登陆</router-link></p>
                    <p class="p_right"><router-link to="/addTo" class="registrePath">未搜到单位，添加单位</router-link></p>
                </div>
        </div>
    </div>
</template>
<script>
  export default {
    data() {
      return {
        //restaurants: [],
        streets:[],
        socialCreditCode:'',
        selectCompany: '',
        timeout:  null,
        listResults:[],
        phoneNumber:'',
        passWords:'',
        RegisterSecurityCode:'',
        btnContent:'获取验证码',
        disabled:false,
        registerCompany:'',
        companyId:null,
        unitDetailedName:'',
        // districts: [{ //所属街道
        //   label: '朝阳区',
        //   options: [{
        //     value: '酒仙桥',
        //     label: '酒仙桥'
        //   }, {
        //     value: '麦子店',
        //     label: '麦子店'
        //   }, {
        //     value: '劲松',
        //     label: '劲松'
        //   }, {
        //     value: '将台',
        //     label: '将台'
        //   }
        //   ]
        // }, {
        //   label: '海淀区',
        //   options: [{
        //     value: '中关村',
        //     label: '中关村'
        //   }, {
        //     value: '北下关',
        //     label: '北下关'
        //   }, {
        //     value: '八里庄',
        //     label: '八里庄'
        //   }]
        // },{
        //      label: '门头沟区',
        //   options: [{
        //     value: '石龙',
        //     label: '石龙'
        //   }, {
        //     value: '大峪',
        //     label: '大峪'
        //   }]
        // }],
      };
    },
    mounted:function(){
        this.getStreet();
    },
    methods: {
        // 模糊查询
      querySearchAsync(queryString, cb) {
        var regWords = /[\u4e00-\u9fa5]/;
        var results = [];
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {//计时器
              if(this.selectCompany){
                var self = this;
                this.$http({
                method:'get',
                url:'/inventory/select?name='+this.selectCompany,
                }).then(function(res){
                let data = res.data;
                if(data.status === 200){
                    var results = res.data.data;;
                    cb(results);
                }else{
                    this.$message.error(data.message);
                }
                }).catch(function(err){
                console.log(err);
                })
            }
        }, 3000 * Math.random());
      },
      handleSelectCompany(item) {
          console.log(item);
          this.socialCreditCode = item.socialCreditCode;
          this.companyId = item.id;
          this.unitDetailedName = item.value;
      },
         // 获取验证码
        sendSecurityCode(){
            var reg=11&& /^((13|14|15|17|18)[0-9]{1}\d{8})$/;//手机号正则验证
            var phoneNum = this.phoneNumber;
            if(!phoneNum){//未输入手机号
            this.$message.error("请输入手机号码");
            return;
            }
            if(!reg.test(phoneNum)){//手机号不合法
            this.$message.error("您输入的手机号码不合法，请重新输入");
            return;
            }
            this.time = 120;
            this.timer();
            let self = this;
            //发送验证码端口请求
            this.$http({
            method:'get',
            url:'/code/getcode?phone='+this.phoneNumber,
            }).then(function(res){
                let data = res.data;
                if(data.status === 200){
                    self.$message.success(data.message);
                }else{
                    self.$message.error(data.message);
                }
            }).catch(function(err){
                console.log(err);
            })
        },
        // 计时器
        timer(){
            if(this.time>0){
            this.time--;
            this.btnContent = this.time+"s后重新获取";
            this.disabled = true;
            var timer = setTimeout(this.timer,1000);
            }else if(this.time == 0){
            this.btnContent = "获取验证码";
            clearTimeout(timer);
            this.disabled = false;
            }
        },
        //注册
        registerMessage(){
            var reg = 11&& /^((13|14|15|17|18)[0-9]{1}\d{8})$/;//手机号正则验证
            var regPassWord = /^\d{6,12}$/
            var regCode =  /^[0-9a-zA-Z]{18}$/;//信用代码正则
            var self = this;
            //判断字段必填
            if(!this.companyId){
                this.$message.error("请选择单位！");
                return;
            }
            if(!this.socialCreditCode){
                this.$message.error("请输入统一社会信用代码");
                return;
            }
             if(!regCode.test(this.socialCreditCode)){//统一社会信用代码不合法
                this.$message.error("您输入的统一社会信用代码不合法，请重新输入");
                return;
            }
            if(!this.registerCompany){
                this.$message.error("请选择街道");
                return;
            }
            if(!this.phoneNumber){//未输入手机号
                this.$message.error("请输入手机号码");
                return;
            }
            if(!reg.test(this.phoneNumber)){//手机号不合法
                this.$message.error("您输入的手机号码不合法，请重新输入");
                return;
            }
            if(!this.passWords){//未输入密码
                this.$message.error("请输入密码");
                return;
            }
            if(!regPassWord.test(this.passWords)){//密码格式不合法}
                this.$message.error("请输入6-12数字");
                return;
            }
            if(!this.RegisterSecurityCode){
                this.$message.error("请输入验证码");
                return;
            }
            //发送请求
            this.$http({
                method:'post',
                url:'/passport/register',
            
                data:{
                        "socialCreditCode":this.socialCreditCode,
                        "phone":this.phoneNumber,
                        "password":this.passWords,
                        "captcha":this.RegisterSecurityCode,
                        "invId":this.companyId,
                        "unitDetailedName":this.unitDetailedName,
                        "subdistrict":this.registerCompany,
                        },
                }).then(function(res){
                    let data = res.data;
                    if(data.status === 200){
                        self.$router.push({ path: "/choicefirm" });
                        console.log(res);
                    }else{
                        self.$message.error(data.message);
                    }
                }).catch(function(err){
                    console.log(err)
                })
           
        },
        //添加单位
        // insertCompany(){
        //     this.$router.push({ path: "/addTo" });
        // },
        //获取街道
        getStreet(){
            let self = this;
            this.$http({
                method:'get',
                url:'/street/getAll',
            }).then(function(res){
                console.log(res);
                let data = res.data;
                if(data.status === 200){
                    self.streets = data.data;
                }else{
                    self.$message.error(data.message);
                }
            }).catch(function(err){
                console.log(err)
            })
        },
    },
  };
</script>
<style scoped>
.p_left{
    float:left;
    }
.p_right{
    float:right;
    }
</style>

